import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { formatMessage, FormattedMessage } from 'umi/locale';
import Link from 'umi/link';
import { Card, Row, Col, Tabs, Tooltip, Icon, message, Button } from 'antd';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import ProductInfo from '../components/info';
import ProductTopic from '../components/topic';
import ProductTCP from '../components/tcp';
import ProductModbus from '../components/modbus';
import ProductSubscribe from '../components/subscribe';
import ProductFunction from '../components/function';
import ProductProp from '../components/prop';
import ProductProtocolInfo from '../components/protocol';
import ProductProtocolDetail from '../components/protocol/detail';
import ProductService from '../components/service';
import styles from './style.less';

const { TabPane } = Tabs;

@connect(({ product, loading }) => ({
  product,
  loading: loading.models.product,
}))
class ProductDetail extends PureComponent {
  state = {
    secret: '***********',
    isShowHide: formatMessage({ id: 'app.dm.product.detail.show' }),
  };

  componentDidMount() {
    const { dispatch, match } = this.props;
    const { params } = match;

    dispatch({
      type: 'product/fetchDetail',
      payload: params.id,
    });
  }

  render() {
    const {
      dispatch,
      product: { detail },
      match,
      location,
    } = this.props;
    const { params } = match;
    const { protocol, protocolId } = location.state;

    const showSecret = st => {
      if (this.state.secret === '***********') {
        this.setState({
          secret: st,
          isShowHide: formatMessage({ id: 'app.dm.product.detail.hide' }),
        });
      } else {
        this.setState({
          secret: '***********',
          isShowHide: formatMessage({ id: 'app.dm.product.detail.show' }),
        });
      }
    };

    const showProtocolTab = p => {
      if (p === 1) {
        return <ProductTopic />;
      }
      if (p === 2) {
        return <ProductTCP />;
      }
      if (p === 3) {
        return <ProductModbus />;
      }
      return null;
    };

    const showProtocolTabHelp = p => {
      if (p === 1) {
        return (
          <div>
            <span>{formatMessage({ id: 'app.dm.product.detail.topic.help' })}</span>
            <a style={{ marginLeft: 5 }}>
              {formatMessage({ id: 'app.dm.product.detail.topic.help.doc' })}
            </a>
          </div>
        );
      }
      if (p === 2) {
        return (
          <div>
            <span>{formatMessage({ id: 'app.dm.product.detail.tcpip.help' })}</span>
            <a style={{ marginLeft: 5 }}>
              {formatMessage({ id: 'app.dm.product.detail.tcpip.help.doc' })}
            </a>
          </div>
        );
      }
      if (p === 3) {
        return (
          <div>
            <span>{formatMessage({ id: 'app.dm.product.detail.modbus.help' })}</span>
            <a style={{ marginLeft: 5 }}>
              {formatMessage({ id: 'app.dm.product.detail.modbus.help.doc' })}
            </a>
          </div>
        );
      }
      return null;
    };

    const showProtocolTabTitle = p => {
      if (p === 1) {
        return formatMessage({ id: 'app.dm.product.detail.topic' });
      }
      if (p === 2) {
        return formatMessage({ id: 'app.dm.product.detail.tcpip' });
      }
      if (p === 3) {
        return formatMessage({ id: 'app.dm.product.detail.modbus' });
      }
      return null;
    };

    const publish = bo => {
      dispatch({
        type: 'product/publish',
        payload: { id: detail.id, state: bo },
      });
    };

    return (
      <PageHeaderWrapper>
        <div>
          <Card bordered={false} style={{ marginBottom: '24px' }}>
            <Row style={{ marginBottom: '24px' }}>
              <Col span={12}>
                <span style={{ fontWeight: 'bold' }}>{detail.name}</span>
              </Col>

              <Col span={12} style={{ textAlign: 'right' }}>
                {detail.state === 1 ? (
                  <Button onClick={() => publish(2)} type="primary">
                    <FormattedMessage id="app.dm.product.publish" />
                  </Button>
                ) : (
                  <Button onClick={() => publish(1)}>
                    <FormattedMessage id="app.dm.product.unpublish" />
                  </Button>
                )}
              </Col>
            </Row>
            <Row>
              <Col span={8}>
                <span style={{ color: '#a3a3a3' }}>ProductKey：</span>
                <span style={{ color: '#666666' }}>{detail.key}</span>
                <CopyToClipboard
                  text={detail.key}
                  onCopy={() =>
                    message.success(formatMessage({ id: 'app.dm.product.detail.copy.success' }))
                  }
                >
                  <a style={{ marginLeft: 10 }}>
                    {formatMessage({ id: 'app.dm.product.detail.copy' })}
                  </a>
                </CopyToClipboard>
              </Col>
              <Col span={9}>
                <span style={{ color: '#a3a3a3' }}>ProductSecret：</span>
                <span style={{ color: '#666666' }}>{this.state.secret}</span>
                <a style={{ marginLeft: 10 }} onClick={() => showSecret(detail.secret)}>
                  {this.state.isShowHide}
                </a>
                <CopyToClipboard
                  text={detail.secret}
                  onCopy={() =>
                    message.success(formatMessage({ id: 'app.dm.product.detail.copy.success' }))
                  }
                >
                  <a style={{ marginLeft: 10 }}>
                    {formatMessage({ id: 'app.dm.product.detail.copy' })}
                  </a>
                </CopyToClipboard>
              </Col>
              <Col span={7}>
                <span style={{ color: '#a3a3a3', paddingLeft: 60 }}>
                  {formatMessage({ id: 'app.dm.product.detail.gross' })}
                </span>
                <span style={{ color: '#666666', paddingLeft: 10 }}>{detail.gross}</span>
                <Link to={`/dm/devices?pid=${params.id}`} style={{ marginLeft: 20 }}>
                  {formatMessage({ id: 'app.dm.product.detail.manage' })}
                </Link>
              </Col>
            </Row>
          </Card>
          <Card bordered={false}>
            <Tabs defaultActiveKey="1" animated={false}>
              <TabPane tab={formatMessage({ id: 'app.dm.product.detail.info' })} key="1">
                <ProductInfo detail={detail} />
              </TabPane>
              <TabPane
                tab={
                  <Fragment>
                    <span>{showProtocolTabTitle(protocol)}</span>
                    <em className={styles.optional} style={{ marginLeft: 5 }}>
                      <Tooltip title={showProtocolTabHelp(protocol)}>
                        <Icon type="info-circle-o" style={{ marginLeft: 4 }} />
                      </Tooltip>
                    </em>
                  </Fragment>
                }
                key="2"
              >
                {showProtocolTab(protocol)}
              </TabPane>

              <TabPane tab={formatMessage({ id: 'app.dm.product.detail.func' })} key="3">
                <ProductFunction params={params} />
              </TabPane>
              <TabPane
                tab={
                  <Fragment>
                    <span>{formatMessage({ id: 'app.dm.product.detail.server' })}</span>
                    <em className={styles.optional} style={{ marginLeft: 5 }}>
                      <Tooltip title={formatMessage({ id: 'app.dm.product.detail.server.help' })}>
                        <Icon type="info-circle-o" style={{ marginLeft: 4 }} />
                      </Tooltip>
                    </em>
                  </Fragment>
                }
                key="4"
              >
                <ProductSubscribe />
              </TabPane>
              <TabPane tab={formatMessage({ id: 'app.dm.product.detail.prop' })} key="5">
                <ProductProp params={params} />
              </TabPane>

              {protocol !== 3 ? (
                <TabPane tab={formatMessage({ id: 'app.dm.product.detail.protocol.info' })} key="6">
                  <ProductProtocolInfo params={params} />
                </TabPane>
              ) : (
                undefined
              )}

              {protocol !== 3 ? (
                <TabPane
                  tab={formatMessage({ id: 'app.dm.product.detail.protocol.detail' })}
                  key="7"
                >
                  <ProductProtocolDetail
                    params={params}
                    protocolId={protocolId}
                    protocol={protocol}
                  />
                </TabPane>
              ) : (
                undefined
              )}

              <TabPane tab={formatMessage({ id: 'app.dm.product.detail.service' })} key="8">
                <ProductService params={params} protocolId={protocolId} />
              </TabPane>
            </Tabs>
          </Card>
        </div>
      </PageHeaderWrapper>
    );
  }
}

export default ProductDetail;
